<template>
    <van-field name="uploader"  :label="label">
      <template #input>
        <van-uploader 
          multiple
          @oversize="onOversize" 
          @delete="deleteClzp" 
          :before-read="beforeRead" 
          :before-delete="beforeDelete"
          :after-read="clzpAfterRead"
          :max-count="20" 
          :max-size="20 * 1024 * 1024" 
          v-model="childFileList" 
          :readonly="readonly"
          :show-upload="uploadable"
          :deletable="deletable"
          :preview-options="previewOption"
          preview-size="40"
        >
        </van-uploader>
      </template>
    </van-field>
</template>
<script>
  import { uploadFiles } from "@/apis/index";
  import { Toast } from 'vant';
import App from "@/App.vue";
  export default {
    name: "Upload",
    props: {
        fileList: {
            required: true,
            type: Array,
        },
        viewMode: {
            required: false,
            type: Boolean
        },
        title: {
            required: false,
            type: String
        },
        taskCode: {
            required: true,
            type: String
        },
        processConfigId: {
            required: true,
            type: Number
        },
        elementIndex: {
            required: true,
            type: Number
        },
        fixed: {
            required: true,
            type: Number
        }
    },
    data() {
        return {
            clzpfilePath: "",
            childFileList: [],
            showPicker: false,
            defectList: [],
            previewOption: {
                closeable: true
            },
            fileInfo: {},
            currentFile: null,
            currentFileName: null,
            uploadable: true,
            deletable: true,
            readonly: false,
            label: '',
            loading: false
        };
    },
    mounted() {
        if (this.fileList) {
            this.childFileList = this.fileList;
            console.log('fileList', this.childFileList)
        }
    },
    created() {
    },
    watch: {
        fileList: {
            handler(newName, oldName) {
                if (newName)
                    this.childFileList = newName;
            },
            deep: true,
            immediate: true
        },
        viewMode: {
            handler(newValue, oldValue) {
                if (newValue != undefined && newValue != null) {
                    this.readonly = newValue;
                    this.uploadable = !newValue;
                    this.deletable = !newValue;
                }
            },
            deep: true,
            immediate: true
        },
        title: {
            handler(newValue, oldValue) {
                this.label = newValue;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        onOversize(file) {
            Toast("文件大小不能超过5MB");
        },
        //校验图片的格式
        beforeRead(file) {
            if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
                Toast("请上传正确格式的图片");
                return false;
            }
            return true;
        },
        beforeDelete() {
            if (this.readonly)
                return false;
            else
                return true;
        },
        //照片上传事件方法
        clzpAfterRead(file, detail) {
            // 上传状态提示开启
            file.status = "uploading";
            file.message = "上传中...";
            // 创建一个空对象实例
            let formData = new FormData();
            // 调用append()方法添加数据
            formData.append("file", file.file);
            let param = {
                moduleType: 1,
                taskCode: this.taskCode,
                fileData: formData
            };
            this.loading = true
            uploadFiles(param).then((res) => {
                file.status = "done";
                //新增文件
                if (res.code == 1) {
                    let fileData = res.data;
                    fileData.moduleId = 1;
                    fileData.moduleType = 1;
                    fileData.fileLocationType = 1;
                    fileData.processConfigId = this.processConfigId;
                    fileData.source = 'LOCAL';
                    // fileData.file = new File([], res.data.fileName, {});
                    this.fileInfo = fileData;
                    this.$emit("fileChange", "add", this.fixed, this.elementIndex, fileData);
                    this.showPicker = true;
                }
            }).catch(e => {
                //file.status = "failed";
            }).finally(() => {
                
            })
        },
        //照片删除事件方法
        deleteClzp(data, detail) {
            this.$emit("fileChange", "delete", this.fixed, this.elementIndex, data);
        }
    },
    components: { App }
};
</script>

<style lang="scss" scoped>
  .btn {
    height: 32px !important;
    margin-right: 10px;
  }

  .btn:last-child {
    margin-right: 0;
  }


  .paginationCss {
    margin-top: 30px;
  }

  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }

.van-loading__text {
  display: inline-block;
  color: #f2f3f5;
  font-size: var(--van-loading-text-font-size);
  vertical-align: middle;
}

.van-loading {
  position: relative;
  color: #f2f3f5 !important;
  font-size: 0;
  vertical-align: middle;
}
</style>